<template>
  <div>
    <!-- 登录导航 -->
    <van-row @click="changeisShow">
      <van-col span="6"><img :src="avatar" alt="" /></van-col>
      <van-col span="10">{{ userNickname }}</van-col>
      <van-col span="8"
        ><van-icon :name="loginIcon" @click="loginclear"
      /></van-col>
    </van-row>
    <!-- 菜单栏 -->
    <van-grid :column-num="3" square>
      <van-grid-item
        v-for="item in UserArr"
        :key="item.id"
        :icon="item.url"
        :text="item.name"
      />
    </van-grid>
    <!-- 登录框 -->
    <van-popup v-model="isShow"
      ><van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            color="#EE0A24"
            >登录</van-button
          >
        </div>
      </van-form></van-popup
    >
    <!-- 退出登录确认框 -->
    <van-dialog
      v-model="DialogShow"
      title="请确认"
      show-cancel-button
      @confirm="onConfirm"
    >
      是否退出？
    </van-dialog>
  </div>
</template>

<script>
import { Userlogin } from "../request/api";
import avatar from "../assets/avatar.png";
import { mapState, mapMutations } from "vuex";
// import { mapMutations } from 'node_modules/vuex/types';
export default {
  data() {
    return {
      avatar,
      isShow: false,
      username: "",
      password: "",
      UserArr: [
        { name: "我的订单", url: "label-o" },
        { name: "优惠券", url: "bill-o" },
        { name: "礼品卡", url: "goods-collect-o" },
        { name: "我的收藏", url: "location-o" },
        { name: "我的足迹", url: "flag-o" },
        { name: "会员福利", url: "contact" },
        { name: "地址管理", url: "aim" },
        { name: "账号安全", url: "warn-o" },
        { name: "联系客服", url: "service-o" },
        { name: "帮助中心", url: "question-o" },
        { name: "意见反馈", url: "smile-comment-o" },
      ],
      userNickname: "请登录",
      loginIcon: "arrow",
      DialogShow: false,
    };
  },
  created() {
    //刷新页面，判断是否有token,有得话就渲染用户数据
    let userInfo = localStorage.getItem("userInfo");
    if (userInfo) {
      userInfo = JSON.parse(userInfo);
      this.avatar = userInfo.avatar;
      this.userNickname = userInfo.nickname;
      this.loginIcon = "cross";
    }
  },
  methods: {
    ...mapMutations({ changeIsGoBack: "isGoback/changeIsGoBack" }),
    // 点击确认退出
    onConfirm() {
      this.$toast.success("退出成功");
      localStorage.removeItem("userInfo");
      localStorage.removeItem("token");
      this.avatar = avatar;
      this.userNickname = "请登录";
      //修改箭头按钮
      this.loginIcon = "arrow";
    },
    //退出登录,显示确认框
    loginclear() {
      let token = localStorage.getItem("token");
      if (!token) {
        return;
      }
      this.DialogShow = true;
    },
    // 用户注册提交
    onSubmit(values) {
      // console.log("submit", values);
      console.log("submit", values["用户名"], values["密码"]);
      Userlogin({
        username: values["用户名"],
        pwd: values["密码"],
      }).then((res) => {
        console.log(res);
        // 1.提示登录成功
        this.$toast.success("登录成功");
        // 3.保存数据
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));

        setTimeout(() => {
          // 2.关闭窗口
          this.isShow = false;
          // 4.修改用户数据
          this.avatar = res.data.userInfo.avatar;
          this.userNickname = res.data.userInfo.nickname;
          //修改箭头按钮
          this.loginIcon = "cross";
          // 登录成功后，跳转回原来的页面
          // this.$router.go(-1);
          // 需求：并不是所有页面都需要回到原来的页面，如果用户是主动登录的话，就不需要跳转回去
          // 我们需要一个变量去控制，来决定是否需要跳转回上一页
          // 这个变量可以由其他组件随意修改，涉及到组件间的通讯，所以我们用vuex去做
          console.log(this.isGoback);
          if (this.isGoback) {
            this.$router.go(-1);
            this.changeIsGoBack(false);
          }
        }, 500);
      });
    },
    //弹出登录窗口
    changeisShow() {
      let token = localStorage.getItem("token");
      if (token) {
        return;
      }
      this.isShow = true;
    },
    
  },
  computed: {
    ...mapState({
      isGoback: (state) => state.isGoback.isGoback,
    }),
  },
};
</script>
 
<style lang = "less" scoped>
.van-row {
  background-color: #333;
  color: #ffffff;
  padding: 0.133333rem 0.133333rem;
  .van-col {
    font-size: 0.106667rem;
    line-height: 0.8rem;
    img {
      display: block;
      width: 0.8rem;
      border-radius: 50%;
    }
    &:last-child {
      text-align: right;
    }
  }
}
.van-popup {
  width: 90%;
}
/deep/.van-dialog__content {
  text-align: center;
  padding: 0.133333rem;
}
</style>